<template>
  <button @click="saveData">保存数据</button>
  <div></div>
  <div id="container" style="width: 100%; height: 100%"></div>
</template>
<script setup>

import {option_edit_5} from "@/views/reportDesigner/option_edit_5.js";
import {onMounted} from "vue";
import axios from "axios";
let jdbb=  [
  {
    "name": "sheet1",
    "SheetData": {
      "freeze": "A1",
      "columnHead": [
        {
          "Column": 0
        },
        {
          "Column": 1
        },
        {
          "Column": 2
        }
      ],
      "rowHead": [
        {
          "Row": 0
        }
      ],
      "stylesConfig": [],
      "cellConfig": [
        {
          "column": 0,
          "row": 0,
          "value": "商品季度销售.商品",
          "valueType": 1,
          "expansion": 1,
          "editable": false,
          "scaleType": 1,
          "dataConfig": {
            "value": "商品季度销售.商品",
            "type": "3",
            "merge": 1,
            "axisType": 1,
            "data_type": "3",
            "order": 0
          },
          "type": 2,
          "dataType": "3"
        },
        {
          "column": 1,
          "row": 0,
          "value": "商品季度销售.季度",
          "valueType": 1,
          "expansion": 1,
          "editable": false,
          "scaleType": 1,
          "dataConfig": {
            "value": "商品季度销售.季度",
            "type": "2",
            "axisType": 1,
            "data_type": "2",
            "order": 0,
            "merge": 1
          },
          "type": 2,
          "dataType": "2"
        },
        {
          "column": 2,
          "row": 0,
          "value": "商品季度销售.销售额",
          "valueType": 1,
          "expansion": 1,
          "editable": false,
          "scaleType": 1,
          "dataConfig": {
            "value": "商品季度销售.销售额",
            "type": "2",
            "aggregate": 1,
            "axisType": 2,
            "data_type": "2",
            "order": 0
          },
          "type": 2,
          "dataType": "2"
        }
      ],
      "groupConfig": [
        {
          "label": "A1-C1",
          "sri": 0,
          "sci": 0,
          "eri": 0,
          "eci": 2,
          "borderColor": "rgba(94, 255, 215)",
          "bgColor": "rgba(94, 255, 215,0.5)",
          "filter": null
        }
      ],
      "collapse": [],
      "waterMask": null,
      "toolbarButtonList": [
        {
          "showIcon": true,
          "showText": true,
          "text": "首页",
          "icon": "fa fa-step-backward",
          "color": "#2c3e50",
          "show": true,
          "type": 1
        },
        {
          "showIcon": true,
          "showText": true,
          "text": "上一页",
          "icon": "xzreport-icon-arrow-left-filling",
          "color": "#2c3e50",
          "show": true,
          "type": 2
        },
        {
          "showIcon": true,
          "showText": true,
          "text": "当前页/总页数",
          "icon": "fa fa-file-text-o",
          "color": "#2c3e50",
          "show": true,
          "type": 3
        },
        {
          "showIcon": true,
          "showText": true,
          "text": "下一页",
          "icon": "xzreport-icon-arrow-right-filling",
          "color": "#2c3e50",
          "show": true,
          "type": 4
        },
        {
          "showIcon": true,
          "showText": true,
          "text": "末页",
          "icon": "fa fa-step-forward",
          "color": "#2c3e50",
          "show": true,
          "type": 5
        },
        {
          "showIcon": true,
          "showText": true,
          "text": "打印",
          "color": "#2c3e50",
          "icon": "fa fa-print",
          "show": true,
          "type": 6
        },
        {
          "showIcon": true,
          "showText": true,
          "text": "导出",
          "icon": "fa fa-download",
          "color": "#2c3e50",
          "show": true,
          "type": 7
        }
      ],
      "paramsConfig": [],
      "dataConfig": [],
      "apiConfig": {
        "url": "",
        "key": "",
        "secret": ""
      }
    }
  }
]

let data;
let config;


// 第三方数据集列表  results.dataset中必须配置上这个功能
// 该方法的返回值是一个Promise
// 可以 axios 发出动态的请求，返回的结果集都必须归类到   id：4，value: "外部数据集" 目录下；

const onUpdateDatasetList = () => {
  console.log("..xzreportdesigneredit5.vue..axios.post ../api/xzreportdesigner/report5/outdatasets   onUpdateDatasetList is called");
  return new Promise((resolve, reject) => {
    let results = axios({
      method: "POST",
      url: "/api/xzreportdesigner/report5/outdatasets",
      data: {
        reportType: "reportDesigner",
        reportId: 'xzReportDesigner5'
      }
    }).then((response) => {
      results = response.data.data.results;
      console.log("ok,", results);
      resolve(results)
    }).catch((error) => {
      console.log(error);
      resolve([])
    })

  })
}

option_edit_5.onUpdateDatasetList = onUpdateDatasetList;

const on_dataset_edited = (dataset)=>{
  console.log("...dataset_edited...,dataset:",dataset);
}
let sheetDesign;
onMounted(() => {
  sheetDesign = XZReportDesigner("#container", option_edit_5);
  sheetDesign.on("dataset-edited",on_dataset_edited);
  axios({
    method: "post",
    url: "/api/xzreportdesigner/report5/configanddata",
    data: {
      reportType: "reportDesigner",
      reportId: 'xzReportDesigner5'
    }
  }).then((response) => {
    data = response.data.data.data;
    config = response.data.data.config;
    console.log("..xzreportdesigneredit5.vue...onmounted...axios.post...config:", config);
    console.log("..xzreportdesigneredit5.vue...onmounted...axios.post...data:", data);

    //sheetDesign.loadData({config: config, data: data});
    sheetDesign.loadData({config: jdbb, data: []});
  })

})

function saveData() {
  // config 为报表配置 ， data为 数据配置
  let reportTemplateInstance = sheetDesign.getData();

  console.log(reportTemplateInstance)
  console.log(reportTemplateInstance.config)
  console.log(reportTemplateInstance.data);
}
</script>
<style scoped>

</style>
